<script setup>
import { ref, toRaw } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import Type from '@components/search/type';
import Search from '@components/search/index';
import PageWrapper from '@components/PageWrapper.vue';
import { common, service } from '@utils';
import { Plus, Edit, Delete, CaretRight,View } from '@element-plus/icons-vue';
import { usePremission } from '@hooks';
import EditCom from './Edit';

const premission = usePremission({
    add: 'job:add',
    edit: 'job:edit',
    delete: 'job:delete',
    executeNow: 'job:executeNow',
    changeStatus:'job:changeStatus',
    view:'job:getInfo'
});

const searchs = ref([
    {
        type: Type.INPUT,
        key: 'jobName',
        width: 6,
        placeholder: '任务名称',
        likes:true
    },
    // {
    //     type: Type.SELECT,
    //     key: 'url',
    //     placeholder: '服务实例',
    //     valueKey: 'val',
    //     data: [],
    // },
    {
        type: Type.SELECT,
        key: 'status',
        placeholder: '开启状态',
        valueKey: 'value',
        data: [
            { label: '暂停', value: '0' },
            { label: '正常', value: '1' },
        ],
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON,
    },
]);

const pageRef = ref();
const tableRef = ref();
const editRef = ref();
const statusLoad = ref(false);
let queryForm = {};

const onSearch = param => {
    queryForm = param;
    pageRef.value.refresh();
};

const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service.monitor.schedules(pageNum, pageSize, queryForm);
    cb(res);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};

const getTypes = async () => {
    const res = await service.sys.dictionaryAll();

    if (res) {
        let services = null;
        let states = null;
        for (let i = 0; i < res.length; i++) {
            if (res[i].code === 'edp-service') {
                services = res[i].list;
            } else if (res[i].code === 'yesNo') {
                res[i].list.forEach(item => {
                    item.val === 'true' && (item.val = true);
                    item.val === 'false' && (item.val = false);
                });
                states = res[i].list;
            }
        }
        searchs.value[1].data = services;
        searchs.value[1].data = states;
    }
};

const deleteRow = async row => {
    ElMessageBox.confirm('是否删除此记录', '提示', {
        type: 'warning',
    }).then(async () => {
        const res = await service.monitor.scheduleDelete(row.jobId);
        if (res) {
            ElMessage.success('删除成功');
            pageRef.value.refresh(true);
        }
    });
};
const executeNowBtn = async row => {
    ElMessageBox.confirm('是否立即执行一次', '提示', {
        type: 'warning',
    }).then(async () => {
        const res = await service.monitor.scheduleExecuteNow(row.jobId);
        if (res) {
            ElMessage.success('立即执行成功');
            pageRef.value.refresh(true);
        }
    });
};
const statusChange = async row => {
    statusLoad.value = true;
    let param = {
        jobId:row.jobId,
        status:row.status == 1 ? 0 : 1
    }
    const res = await service.monitor.scheduleChangeStatus(param);
    if (res) {
        ElMessage.success(row.status == 0 ? '开启成功':'暂停成功');
        statusLoad.value = false;
        
    }else{
        ElMessage.error(row.status == 0 ? '开启失败':'暂停失败');
        statusLoad.value = false;
    }
    return res
};
// getTypes();

const width = (function (premission) {
    let width = 24;
    premission.edit && (width += 33);
    premission.delete && (width += 33);
    premission.executeNow && (width += 33);
    premission.view && (width += 33);
    return Math.max(width, 60);
})(premission);
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <div class="margin-bottom10" v-if="premission.add">
            <el-button type="primary" :icon="Plus" @click="editRef.open(null,false)">添加</el-button>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table ref="tableRef" class="mytable-scrollbar" show-overflow :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, premission.add ? 2 : 1)" highlight-hover-row round stripe border>
                    <vxe-column field="jobId" title="任务ID" width="100"></vxe-column>
                    <vxe-column field="jobName" title="任务名称" width="150" />
                    <vxe-column field="concurrentDesc" title="是否并发执行" width="100" />
                    <vxe-column field="createBy" title="创建者" width="100" />
                    <vxe-column field="createTime" title="创建时间" width="150" />
                    <vxe-column field="cronExpression" title="cron执行表达式" width="200" />
                    <vxe-column field="invokeTarget" title="调用目标字符串" width="200" />
                    <vxe-column field="jobGroup" title="任务组名" width="100" />
                    <vxe-column field="misfirePolicyDesc" title="计划执行策略" width="100" />
                    <vxe-column title="状态" width="100" v-if="premission.changeStatus">
                        <template #default="{ row }">
                            <el-switch v-model="row.status" :loading="statusLoad" :activeValue="1" :inactiveValue="0" :before-change="statusChange.bind(this, row)" />
                        </template>
                    </vxe-column>
                    <vxe-column title="操作" :min-width="width" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <el-tooltip v-if="premission.view" effect="dark" content="详情" placement="top" :enterable="false">
                                    <el-button :icon="View" size="small" circle @click="editRef.open(row,true)"></el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.edit" effect="dark" content="修改" placement="top" :enterable="false">
                                    <el-button type="primary" :icon="Edit" size="small" circle @click="editRef.open(row,false)"></el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.delete" effect="dark" content="删除" placement="top" :enterable="false">
                                    <el-button type="danger" :icon="Delete" size="small" circle @click="deleteRow(row)"></el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.executeNow" effect="dark" content="立即执行" placement="top" :enterable="false">
                                    <el-button type="warning" :icon="CaretRight" size="small" circle @click="executeNowBtn(row)"></el-button>
                                </el-tooltip>
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
        <!-- :services="searchs[1].data" :states="searchs[2].data" -->
        <edit-com ref="editRef" @refresh="flag => pageRef.refresh(flag)" />
    </section>
</template>
